<template>
  <view class="blue-header-card" :style="{padding:padding+'rpx'}">
    <view>
      <view class="blue-card-title">{{title}}</view>
      <view class="blue-card-body">
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    padding:{
        type: Number,
        default: 30,
    }
  },
};
</script>

<style lang="scss" scoped>
//  蓝色标题头的crad

.blue-header-card {
  & > view {
    border-radius: 16rpx;
    background-color: white;
  }

  & > view > .blue-card-title {
    padding: 15rpx 0;
    font-size: 24rpx;
    color: #3ca0fe;
    background-color: #dfebf8;
    text-align: center;
  }
}
</style>
